<template>
<div>

    <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
             label-width="120px">
      <el-row  :gutter="15">
        <el-col :span="12">
            <el-form-item label="名称" v-show="false"  prop="name"
                :rules="[
                 ]">
              <el-input v-model="inputForm.name" placeholder="请填写名称"     ></el-input>
           </el-form-item>
        </el-col>
        <!-- 文字模块 -->
        <el-row style="text-align: center;">
          <!-- 显示文字模块 -->
          <el-col v-if="!visible">
            <el-col style='font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软黑",Ari雅al,sans-serif;font-size:20px;text-align:center;'>{{ inputForm.remarks }}</el-col>
          </el-col>
          <el-divider v-if="inputForm.remarks != ''"></el-divider>
          <!-- 输入文字模块 -->
        <el-col :span="14" :lg="14" :md="24" :sm="24" :xs="24" style="text-align: center;">
           <el-form-item v-if="visible" label="介绍信息" prop="remarks"
                :rules="[
                 ]">
          <el-input type="textarea" v-model="inputForm.remarks" placeholder="请填写介绍信息"></el-input>
           </el-form-item>
        </el-col>
        </el-row>
        <!-- 图片模块 -->
        <el-col>
          <!-- 显示图片模块 -->
          <el-card v-if="src != ''">
            <el-image :src="src" fit="contain" >
               <div slot="error" class="image-slot">
                  <i class="dot"></i>
                </div>
            </el-image>
          </el-card>
          <!-- 导入图片模块 -->
        <el-col :span="24" :lg="14" :md="24" :sm="24" :xs="24"  v-if="visible">
            <el-form-item label="图片"  prop="picture"
                :rules="[
                 ]">
              <el-upload ref="picture"
              list-type="text"
                   :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/basicdata/standard/basicdataPicUpload`"
                   :headers="{token: $cookie.get('token')}"
                    :on-success="(response, file, fileList) => {
                       inputForm.picture = fileList.map(item => (item.response && item.response.url) || item.url).join('|')
                       this.path=file
                       this.src=response.url
                    }"
                    :on-remove="(file, fileList) => {
                      $http.post(`/sys/file/webupload/deleteByUrl?url=${(file.response && file.response.url) || file.url}`).then(({data}) => {
                        this.src = ''
                        $message.success(data.msg)
                      })
                      inputForm.picture = fileList.map(item => item.url).join('|')
                    }"
                    :before-remove="(file, fileList) => {
                      return $confirm(`确定移除 ${file.name}？`)
                    }"
                    multiple
                    :limit="1"
                    :on-exceed="(files, fileList) =>{
                      $message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
                    }"
                    :file-list="pictureArra"
                    >
                    <i class="el-icon-plus"></i>
                  </el-upload>
           </el-form-item>
           </el-col>
        </el-col>
        </el-row>
    </el-form>
    <!-- 按钮模块 -->
    <span slot="footer" class="dialog-footer">
      <el-button type="primary"  v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
      <el-button @click="edit()" icon="el-icon-edit" v-if="hasPermission('basicdata:standard:basicdataPicUpload:edit')"></el-button>
    </span>
</div>
</template>

<script>
  export default {
    props: {
      /**
       * 设备对象，包含fileCode、fileDevicename等
       */
      partDevice: {
        id: String,
        name: String
      }
    },
    data () {
      return {
        path: '',
        src: '',
        title: '',
        method: '',
        visible: false,
        loading: false,
        pic_url: '',
        pictureArra: [],
        inputForm: {
          id: '',
          partDevice: {
            id: ''
          },
          name: '',
          picture: '',
          remarks: ''
        }
      }
    },

    created () {
      console.log('PicUP created')
      console.log(this.partDevice)
      console.log(this.partDevice.id)
    },
    mounted () {
      console.log('PicUP mounted')
      console.log(this.partDevice)
      this.refreshList()
    },
    beforeUpdate () {
      console.log('PicUP beforeUpdate')
      console.log(this.partDevice)
    },
    update () {
      console.log('PicUP update')
      console.log(this.partDevice)
    },
    activated () {
      console.log('PicUP activated')
      console.log(this.partDevice)
    },
    watch: {
      inputForm (val) {
        console.log(val)
      },
      path (val) {
        console.log(val)
      },
      'partDevice.id': {
        handler (newPartDeviceId, oldPartDeviceId) {
            console.log(newPartDeviceId)
          this.inputForm.partDevice.id = newPartDeviceId
          // this.getNextNode(newPartDeviceId)
          this.refreshList()
        },
        immediate: true // 第一次绑定数据时就触发
      },
      partDevice: {
        handler (val) {
          console.error('partDevice 变化了')
          console.log(val)
        },
        immediate: true
      }
    },
    methods: {
      // 将类型变为edit 并调用修改方法
      edit () {
        this.method = 'edit'
        this.booleanSort()
      },
      // 将类型变为add 并调用添加方法
      add () {
        this.inputForm.id = ''
        this.method = 'add'
        this.booleanSort()
      },
      // 将类型变为add 并调用查看方法 进入后默认为查看
      view () {
        this.method = 'view'
        this.booleanSort()
        this.visible = false
      },
      // 判断增删改的类型并执行其相对应的方法
      booleanSort () {
        this.pictureArra = []
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          if (this.method === 'edit' || this.method === 'view') { // 修改或者查看
            this.loading = true
            this.$http({
              url: `/basicdata/standard/basicdataPicUpload/getPartDeviceId`,
              method: 'get',
              params: {
                partDevice: {
                  id: this.inputForm.partDevice.id
                }
              }
            }).then(({data}) => {
              this.inputForm = this.recover(this.inputForm, data.basicdataPicUpload)
              this.inputForm.picture.split('|').forEach((item) => {
                if (item.trim().length > 0) {
                  this.pictureArra.push({name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)), url: item})
                }
              })
              this.loading = false
            })
          }
        })
      },
      // 进行数据的传入的方法 并在方法中判断初始显示的应为添加界面还是查看界面
      refreshList () {
        this.visible = false
        this.loading = true
        this.$refs.inputForm.resetFields()
        // if (id === undefined) {
        //   this.inputForm.partDevice.id = '5sss'
        // } else {
        //   this.inputForm.partDevice.id = id
        // }
        // this.inputForm.id = id
        this.$http({
          url: `/basicdata/standard/basicdataPicUpload/getPartDeviceId`,
          method: 'get',
          params: {
            partDevice: {
              id: this.inputForm.partDevice.id
            }
          }
        }).then(({data}) => {
          if (data.basicdataPicUpload === undefined) {
            this.loading = false
            this.add()
            this.src = ''
            this.inputForm.remarks = ''
          } else {
            this.inputForm = this.recover(this.inputForm, data.basicdataPicUpload)
            this.inputForm.picture.split('|').forEach((item) => {
              if (item.trim().length > 0) {
                this.pictureArra.push({name: decodeURIComponent(item.substring(item.lastIndexOf('/') + 1)), url: item})
              }
            })
            this.src = data.basicdataPicUpload.picture
            this.loading = false
          }
        })
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/basicdata/standard/basicdataPicUpload/save`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              if (data && data.success) {
                this.visible = false
                this.$message.success(data.msg)
                this.$emit('refreshDataList')
              }
              this.loading = false
              this.view()
            })
          }
        })
      }
    }
  }
</script>
